<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)"><view slot="navbar-center">提示</view></w-navbar>
		<pageDemoBlock title="基本用法" color="#1c87e4">
			<view class="m-b-2"><w-button @click="show(1)">默认文字提醒</w-button></view>
		</pageDemoBlock>
		<pageDemoBlock title="状态提醒" color="#3be40c">
			<view class="m-b-2"><w-button @click="show(2)">成功状态提醒</w-button></view>
			<view class="m-b-2"><w-button @click="show(3)">警告状态提醒</w-button></view>
			<view class="m-b-2"><w-button @click="show(4)">错误状态提醒</w-button></view>
		</pageDemoBlock>
		<pageDemoBlock title="自定义图标" color="#e44d11">
			<view class="m-b-2"><w-button @click="show(5)">自定义图标</w-button></view>
			<view class="m-b-2"><w-button @click="show(6)">开启遮罩层</w-button></view>
			<view class="m-b-2"><w-button @click="show(7)">延迟5秒关闭</w-button></view>
		</pageDemoBlock>
		<pageDemoBlock title="不同位置展示" color="#1805e4">
			<view class="m-b-2"><w-button @click="show(8)">上方展示</w-button></view>
			<view class="m-b-2"><w-button @click="show(9)">下方展示</w-button></view>
		</pageDemoBlock>
		
		<w-toast ref="toast"></w-toast>
	</view>
</template>

<script>
import pageDemoBlock from '@/components/page-demo-block/index.vue';
export default {
	components: {
		pageDemoBlock
	},
	methods: {
		show(num) {
			switch (num) {
				case 1:
					this.$refs.toast.show({
						title: '这是普通提示'
					});
					break;
				case 2:
					this.$refs.toast.show({
						title: '成功提示',
						type: 'success'
					});
					break;
				case 3:
					this.$refs.toast.show({
						title: '警告提示',
						type: 'warning'
					});
					break;
				case 4:
					this.$refs.toast.show({
						title: '错误提醒',
						type: 'error'
					});
					break;
				case 5:
					this.$refs.toast.show({
						title: '自定义图标',
						icon: 'icon-wui-notice'
					});
					break;
				case 6:
					this.$refs.toast.show({
						title: '遮罩层弹出',
						icon: 'icon-wui-notice',
						mask: true
					});
					break;
				case 7:
					this.$refs.toast.show({
						title: '5秒后关闭',
						icon: 'icon-wui-notice',
						duration: 5000,
						mask: true
					});
					break;
				case 8:
					this.$refs.toast.show({
						title: '上方位置展示',
						direction: 'top'
					});
					break;
				case 9:
					this.$refs.toast.show({
						title: '下方位置展示',
						direction: 'bottom'
					});
					break;
			}
		}
	}
};
</script>
